<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div slot="header">
          <!-- pagetools工具栏组件  -->
          <PageTools>
            <template #before>
              <el-button type="primary" size="small" @click="addFn">
                添加分类
              </el-button>
            </template>
            <template #after>
              <div style="margin-top: 10px;">
                <el-input v-model="titles" placeholder="请输入关键字">
                  <el-button slot="append" icon="el-icon-search" @click="search" />
                </el-input>
              </div>
            </template>
          </PageTools>
        </div>
        <!-- 表格显示 -->
        <el-table :data="tableData" border style="200px">
          <el-table-column prop="image" label="图片">
            <template v-slot="{row}">
              <img style="width:200px;height:200px" :src="row.image" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="desc" label="介绍" />
          <el-table-column label="操作" width="200">
            <template v-slot="{row}">
              <el-button size="small" type="primary" @click="editFn(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="limit"
            layout="prev, pager, next"
            :total="total"
            @current-change="change"
          />
        </el-row>
      </el-card>
      <!-- 弹框组件 -->
      <AddFenlei ref="addfenlei" :show-dialog="showDialog" @close="showDialog=false" @update="getList" />
    </div>
  </div>

</template>

<script>
import AddFenlei from './components/AddFenlei.vue'
import { getfenleiList, getfenleiNum, delfenlei } from '@/api/fenlei'
export default {
  components: {
    AddFenlei
  },
  data() {
    return {
      tableData: [],
      limit: 2,
      start: 0,
      total: 0,
      showDialog: false,
      titles: ''
    }
  },
  created() {
    this.getList()
    this.getfenleiNum()
  },
  methods: {
    // 获取分类列表
    async getList() {
      const res = await getfenleiList({
        _limit: this.limit,
        _start: this.start,
        title_contains: this.titles
      })
      this.tableData = res.data
    },
    // 获取分类数量
    async getfenleiNum() {
      const res = await getfenleiNum({ title_contains: this.titles })
      this.total = res.data
    },
    change(val) {
      this.start = 2 * (val - 1)
      this.getList()
    },
    // 删除分类
    delFn(id) {
      this.$confirm('您是否确定要删除该分类吗？', '提示', {
        type: 'warning'
      }).then(async() => {
        await delfenlei(id)
        /**
         * 判断到删除的是最后一条数据，我们更新列表的时候
         * 应该请求上一页的数据才对，注意：需要判断当前页面是否为第一页
         * 如果是第一页则不需要请求上一页的数据。
         * 如何判断此刻是在删除最后一条数据？
         * 答：roleList.length === 1说明是最后一条数据了
         * */
        if (this.start === this.total - 1 && this.start !== 0) {
          this.start = this.start - this.limit
        }
        this.getList()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.error('取消删除')
      })
    },
    // 添加分类
    addFn() {
      this.showDialog = true
    },
    // 编辑分类
    editFn(id) {
      this.showDialog = true
      this.$refs.addfenlei.getonefenlei(id)
    },
    // 搜索分类
    search() {
      this.getList()
      this.getfenleiNum()

      // const res = await searchfenlei(this.titles)
      // // console.log(122, res)
      // this.tableData = res.data
      // this.total = res.data.length
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input {
    width: 600px;
  }
</style>
